<script lang="ts" setup>
import championAvatar from '@/components/lucImages/championAvatar.vue'

import { OpenNewWindow } from '@wails/program/programfunc'

function viewHistoryDetail() {
  OpenNewWindow(`/sub/historyDetail?id=1`)
}
</script>

<template>
  <div class="history_item" @click="viewHistoryDetail">
    <div class="history_item_avatar">
      <championAvatar :id="1" />
    </div>
    <div class="history_item_info">
      <div class="info_line items-start">
        <div class="info_line_title">
          <b class="text-success mr-2">胜利</b>
          <span>0/15/0</span>
        </div>
      </div>
      <div class="info_line items-end">
        <div class="info_line_mode">极地大乱斗</div>
        <div class="info_line_time">12:00:00</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.history_item {
  width: 100%;
  transition: all .1s ease-in;
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem 2rem 1.5rem 1.5rem;
  cursor: pointer;
  user-select: none;

  &:hover {
    background-color: var(--history-active-bg-color);
    transition: all 0s;
  }

  .history_item_avatar {
    flex-shrink: 0;
  }

  .history_item_info {
    flex: 1;
    font-size: var(--el-font-size-base);
    display: flex;
    padding: .3rem 0;
    flex-direction: column;
    justify-content: space-between;

    .info_line {
      width: 100%;
      display: flex;
      justify-content: space-between;
      gap: 1rem;

      .info_line_time {
        font-size: var(--el-font-size-extra-small);
        color: var(--el-color-info-light-5);
        opacity: 0.8;
      }

      .info_line_mode {
        font-size: var(--el-font-size-extra-small);
        color: var(--el-color-info-light-5);
      }
    }
  }
}
</style>
